<template>
  <div>
    <v-top></v-top>
    <div style='background-color: #C20C0C;height: 5px;'></div>

    <v-module>
      <slot>
        <section>
          <div class='notlogin' v-if='flags'>
            <div class='pic'>
              <a @click='shou' href='javascript:;'>立即登录</a>
            </div>
          </div>
          <div class='login' v-else>
            <aside>

              <div class='songlist1'>
                <p @click='nones'>我的歌单(1)</p>
                <transition name="fade">
                  <ul v-show='none'>
                    <router-link :to="'/mymusic/lickmusic/' + likemusic.id" tag='li'>
                    <div class='left'>
                          <img :src='likemusic.coverImgUrl' width='40' height='40' alt=''>
                      </div>
                      <div class='right'>
                        <p>{{ likemusic.name }}</p>
                        <p style='color:#999;'>{{likemusic.trackCount}}首</p>
                      </div>
                    </router-link>
                  </ul>
                </transition>
              </div>


              <div class='songlist'>
                <p @click='show'>我的歌单({{ data.length }})</p>
                  <transition name="fade">
                    <ul v-show='flag'>
                  <li @click='goto(item.id)' v-for='(item,index) in data' :key="index">
                    <div class='left'>
                      <router-link :to="'/songlist/'+ item.id">
                        <img :src='item.coverImgUrl' width='40' height='40' alt=''>
                    </router-link>
                    </div>
                      <router-link class='right' tag='div' :to="'/songlist/'+ item.id">
                      <p>{{ item.name }}</p>
                      <p style='color:#999;'>{{item.trackCount}}首</p>
                      </router-link>
                  </li>
                    </ul>
                  </transition>
              </div>
            </aside>
            <article>
              <router-view></router-view>
            </article>
          </div>
        </section>
      </slot>
    </v-module>
  </div>
</template>

<script>
import Top from '@/views/Top/Top'
import Nav from '@/views/Nav/Nav'
import module from '@/views/Module/module'
import axios from 'axios'
import config from '@/network/config'
export default {
  name: 'Mymusic',
  data() {
    return{
      url:config.url,
      flag: true,
      data:[],
      likemusic:[],
      none:true
    }
  },
  components:{
    'v-top':Top,
    'v-nav':Nav,
    'v-module':module
  },
  methods:{
    goto(id){
    },

    getdata(){
      var id = window.localStorage.getItem('userId')
      axios.get(`${this.url}/user/playlist?uid=${id}`,{
      withCredentials: true,
      },
      ).then(res => {
        this.$store.commit('getlickmusic',res.data.playlist[0])
        this.likemusic = res.data.playlist.shift()
        this.data  = res.data.playlist.splice(0,res.data.playlist.length) ;
      })
    },




    shou(){
      this.$router.push('/home/login')
      this.$store.commit('login/show')
    },//打开登录开关
    show(){
      this.flag = !this.flag
    },//打开歌单列表
    nones(){
      this.none = !this.none
    },//打开我的歌单
  },
  mounted() {
    this.getdata()
    console.log(window.localStorage.getItem('userId') === null)
  },
  computed:{
    flags (){
      return window.localStorage.getItem('userId') === null
    }
  }
}
</script>

<style scoped>
article{
  height: 856px;
  overflow: scroll;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.songlist1{
  margin-top: 10px;
  overflow: scroll;
}

.songlist{
  margin-top: 10px;
  overflow: scroll;
  height: 710px;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.mysonger{
  height: 36px;
  text-indent: 2rem;
  line-height: 36px;
}
.songlist > p{
  text-indent:  2rem;
}
.mysonger  > p ,.songlist > p {
  font-family: simsun,\5b8b\4f53;
  font-size: 14px;
}

.songlist1 > p{
  text-indent:  2rem;
}
.mysonger  > p ,.songlist1 > p {
  font-family: simsun,\5b8b\4f53;
  font-size: 14px;
}


.left{
  margin-left: 20px;
  margin-top: 5px;
}
.right{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  justify-content: space-evenly;
  overflow: hidden;
}
.songlist ul li:hover{
  background-color: #ccc;
}

.songlist1 ul li:hover{
  background-color: #ccc;
}
.songlist ul li {
  display: flex;
  margin: 10px 0;
  cursor: pointer;
  height: 50px;
}

.songlist1 ul li {
  display: flex;
  margin: 10px 0;
  cursor: pointer;
  height: 50px;
}
article{
  width: 740px;
}
aside{
  width: 240px;
  padding-top: 40px;
  box-sizing: border-box;
}

.login{
  display: flex;
}
/*登录成功后的样式*/
section{
  box-sizing:border-box;
}
.pic{
  width: 807px;
  height: 278px;
  background:url("~@/assets/images/mymusic.png") no-repeat;
  margin-top: 104px;
  margin-left: 104px;
  position: relative;
}
.pic a:hover{
  background-position: 0 -277px !important;
}
.pic a{
  position: absolute;
  right: 158px;
  text-indent: -9999px;
  bottom: 32px;
  background: url("~@/assets/images/mymusic.png")325px 122px;
  display: block;
  width: 167px;
  height: 45px;
}
a{
  font-size: 12px;
}
p{
  font-size: 12px;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.right p:nth-child(1){
  padding-right: 10px;
  box-sizing: border-box;
}
</style>